<template>
	<view style="width: 100%;background-color: #fff;border-radius: 8px;border: 1px solid #ccc;overflow: hidden;">
		<view
			style="height:30px;line-height: 30px;font-size: 18px;padding:0px 10px;display: flex;justify-content: space-between;">
			<view @click="btnEnter" style="flex:1;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
				{{data.name}}
				<text style="color:#999;font-size: 12px;margin-left: 5px;">({{data.totalBook}}本藏书)</text>
			</view>
			<!--      <view @click="btnMore" class="iconfont icon-more" style="color: #666;">更多</view>-->
			<van-icon name="ellipsis" @click="btnMore" />
		</view>
		<view @click="btnEnter">
			<!--			<map :markers="markers" style="width:100%;height:100px;vertical-align: middle;" :latitude="latitude"-->
			<!--				:longitude="longitude"></map>-->
			<image :src="mapSrc" class="mapSrc"></image>
		</view>
		<view
			style="height:30px;line-height: 30px;font-size: 14px;color:#666;padding:0px 10px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
			{{data.address}}
		</view>
	</view>
</template>

<script>
	import cloudApi from "../../common/cloudApi.js"
	import amap from '../../common/amap-wx.130.js';

	export default {
		props: {
			data: {
				type: Object,
			}
		},
		data() {
			return {
				// 地图
				amapPlugin: null,
				key: 'fbd93a5c84c06442ae76e8e1ce342d98',
				markers: [],
				latitude: "", //纬度
				longitude: "", //经度
				mapSrc: ""
			}
		},
		mounted() {
			let _this = this
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			wx.getSystemInfo({
				success: function(data) {
					// var height = data.windowHeight;
					var width = data.windowWidth - 200;
					var size = width + "*" + 100;
					_this.amapPlugin.getStaticmap({
						zoom: 12,
						size: size,
						scale: 2,
						location: `${_this.data.geoPoint.coordinates[0]},${_this.data.geoPoint.coordinates[1]}`,
						markers: `mid,0xFF0000,A:${_this.data.geoPoint.coordinates[0]},${_this.data.geoPoint.coordinates[1]}`,
						success: function(data) {
							_this.mapSrc = data.url
						},
						fail: function(info) {
							console.log(info)
						}
					})
				}
			})

			// this.longitude = this.data.geoPoint.coordinates[0]
			// this.latitude = this.data.geoPoint.coordinates[1]
			// this.markers.push({
			//   longitude: this.longitude,
			//   latitude: this.latitude
			// })
		},
		methods: {
			btnEnter() {
				uni.navigateTo({
					url: "/pages/bookShelf/index?id=" + this.data.id
				})
			},
			btnMore() {
				uni.showActionSheet({
					itemList: ["修改", "删除"],
					success: (res) => {
						if (res.tapIndex == 0) {
							uni.navigateTo({
								url: "../../pages/createBookShelf/index?id=" + this.data.id
							})
						} else if (res.tapIndex == 1) {
							uni.showModal({
								content: "确定要删除此书房吗？",
								success: (res) => {
									if (res.confirm) {
										cloudApi.call({
											name: "deleteBookShelf",
											data: {
												id: this.data.id
											},
											success: (res) => {
												this.$emit("removeHandler")
											}
										})
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mapSrc {
		width: 100%;
	}
</style>
